<template>
  <div class="home">
    <p ref="mvp">我是一个p标签</p>
     <my-header>
       <template slot="left">
         <i class="iconfont icon-fanhui"></i>
       </template>
       <template slot="center">
          我是首页
       </template>
       <template slot="right">
          编辑
       </template>
     </my-header>
     <my-list :childList="list" ref="mylist">
       <template slot-scope="scope">
          <button @click="del(scope)">删除</button>
       </template>
     </my-list>
  </div>
</template>
<script>
// 当插入的内容有可能是html标签的时候，我们一般不用父传子，使用插槽
import  MyHeader from '../components/myHeader'
import MyList from '../components/myList'
export default {
  name: 'HomeView',
  components: {
    MyHeader,
    MyList
  },
  data(){
    return {
      list: [
        {name:'鲁智深',explan:'花和尚'},
        {name:'武松',explan:'行者'},
        {name:'宋江',explan:'及时雨'},
        {name:'燕青',explan:'浪子'}
      ]
    }
  },
  mounted() {
    // let dom = document.querySelector('p');
    // console.log(dom);
    // 在 vue2 中 我们可以通过，$refs 来获取 html元素的节点
    // let dom = this.$refs.mvp;
    // console.log(dom);
    // 还可以通过 $refs 获取组件的实例；
    let obj = this.$refs.mylist;
    console.log(obj);
    obj.add();
  },
  methods: {
    del(val){
      console.log(val);
      this.list.splice(val.i,1);
    }
  },
}
</script>
